{% extends 'users/base.html' %}

{% block title %}
    登录
{% endblock %}

{% block content %}
    <form action="" method="post" enctype="multipart/form-data" class="form-signin">
        {% csrf_token %}

        <img src="{{ MEDIA_URL }}{{ "user/default.png" }}" alt="头像">

        <div class="form-row align-items-center">
            <label for="inputPhone" class="sr-only">Phone</label>
            <div class="input-group">
                <div class="input-group-prepend">
                  <div class="input-group-text form-bottom">
                    <svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-telephone" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                      <path fill-rule="evenodd" d="M3.925 1.745a.636.636 0 0 0-.951-.059l-.97.97c-.453.453-.62 1.095-.421 1.658A16.47 16.47 0 0 0 5.49 10.51a16.471 16.471 0 0 0 6.196 3.907c.563.198 1.205.032 1.658-.421l.97-.97a.636.636 0 0 0-.06-.951l-2.162-1.682a.636.636 0 0 0-.544-.115l-2.052.513a1.636 1.636 0 0 1-1.554-.43L5.64 8.058a1.636 1.636 0 0 1-.43-1.554l.513-2.052a.636.636 0 0 0-.115-.544L3.925 1.745zM2.267.98a1.636 1.636 0 0 1 2.448.153l1.681 2.162c.309.396.418.913.296 1.4l-.513 2.053a.636.636 0 0 0 .167.604L8.65 9.654a.636.636 0 0 0 .604.167l2.052-.513a1.636 1.636 0 0 1 1.401.296l2.162 1.681c.777.604.849 1.753.153 2.448l-.97.97c-.693.693-1.73.998-2.697.658a17.47 17.47 0 0 1-6.571-4.144A17.47 17.47 0 0 1 .639 4.646c-.34-.967-.035-2.004.658-2.698l.97-.969z"></path>
                    </svg>
                  </div>
                </div>
              <input type="text" name="phone" id="inputPhone" class="form-control" placeholder="手机号码" required autofocus>
            </div>
        </div>

        <div class="form-row align-items-center">
            <label for="inputPassword" class="sr-only">Password</label>
            <div class="input-group">
                <div class="input-group-prepend">
                  <div class="input-group-text form-bottom">
                    <svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-unlock" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                      <path fill-rule="evenodd" d="M9.655 8H2.333c-.264 0-.398.068-.471.121a.73.73 0 0 0-.224.296 1.626 1.626 0 0 0-.138.59V14c0 .342.076.531.14.635.064.106.151.18.256.237a1.122 1.122 0 0 0 .436.127l.013.001h7.322c.264 0 .398-.068.471-.121a.73.73 0 0 0 .224-.296 1.627 1.627 0 0 0 .138-.59V9c0-.342-.076-.531-.14-.635a.658.658 0 0 0-.255-.237A1.122 1.122 0 0 0 9.655 8zm.012-1H2.333C.5 7 .5 9 .5 9v5c0 2 1.833 2 1.833 2h7.334c1.833 0 1.833-2 1.833-2V9c0-2-1.833-2-1.833-2zM8.5 4a3.5 3.5 0 1 1 7 0v3h-1V4a2.5 2.5 0 0 0-5 0v3h-1V4z"></path>
                    </svg>
                  </div>
                </div>
              <input type="password" name="password" id="inputPassword" class="form-control" placeholder="密码" required>
            </div>
        </div>

        <div class="checkbox mb-3">
            <label style="float: left;margin-top: 5px;margin-bottom: 20px;" for="">
                <input type="checkbox" value="1" name="remember">记住我
            </label>
            <label style="float: right;margin-top: 5px;margin-bottom: 20px;">
                没有账号，<a href="{% url 'users:register' %}">立即注册</a>
            </label>
        </div>

        <button class="btn btn-lg btn-primary btn-block" type="submit">登录</button>

        <p class="mt-5 mb-3 text-muted">&copy; 2020</p>
    </form>
{% endblock %}